<template>
  <zk-topBg paddingTop="30" :showBack="true" title="入库单"></zk-topBg>
  <view id="addIMput">
    <scroll-view
      :style="{
        padding:
          imputOtherStore.addOrdetailOrEdit === 'detail' ? 0 : ' 0 0 54px',
      }"
      scroll-y>
      <!-- 基本信息 -->
      <view id="baseInfo" class="card">
        <view class="title">
          <zk-titleLeft>基本信息</zk-titleLeft>
        </view>
        <!-- 新增入库时显示 -->
        <view
          v-if="
            imputOtherStore.addOrdetailOrEdit === 'add' ||
            imputOtherStore.addOrdetailOrEdit === 'edit'
          "
          class="form_box flex">
          <view class="form_item select">
            <view class="label flex">
              <view>入库类型</view>
              <view class="color_red">*</view>
            </view>
            <view class="input">
              <uni-data-select
                v-model="PutType"
                text="DictName"
                value="DictCode"
                :localdata="imputOtherStore.putTypeList.TypeList">
              </uni-data-select>
            </view>
          </view>
          <view class="form_item data">
            <view class="label flex">
              <view>入库时间</view>
            </view>
            <view class="input">
              <uni-datetime-picker type="datetime" v-model="PutDate" />
            </view>
          </view>
          <view class="form_item remark">
            <view class="label flex">
              <view>备注信息</view>
            </view>
            <view class="input">
              <uni-easyinput
                v-model="PutRemarks"
                placeholder="请输入内容"></uni-easyinput>
              <!-- <zk-input v-model:value="PutRemarks"></zk-input> -->
            </view>
          </view>
        </view>
        <!-- 详情时显示 -->
        <view v-else class="detail_box fs_14">
          <view class="msg_box">
            <view class="msg_item order flex">
              <view class="label color_text_gray">入库单号</view>
              <view class="info flex color_black">
                <view class="text_overflow">
                  {{ imputOtherStore.PutCode }}
                </view>
                <image @tap="clickToCopy" src="@/static/img/other/copy-g.png" />
              </view>
            </view>
            <view class="msg_item flex">
              <view class="label type color_text_gray">入库类型</view>
              <view class="info flex color_black">
                <view>
                  {{ PutType == "PutAllocation" ? "调拨入库" : "采购入库" }}
                </view>
              </view>
            </view>
            <view class="msg_item flex">
              <view class="label color_text_gray">入库时间</view>
              <view class="info flex color_black">
                <view>{{ PutDate }}</view>
              </view>
            </view>
            <image
              v-if="imputOtherStore.putOderDetail.ReplyStatus == 'CheckFail'"
              class="approval_img"
              src="@/static/img/other/approval-nopassed.png" />
            <image
              v-if="imputOtherStore.putOderDetail.ReplyStatus == 'CheckNot'"
              class="approval_img"
              src="@/static/img/other/approval-pending.png" />
            <image
              v-if="imputOtherStore.putOderDetail.ReplyStatus == 'CheckPass'"
              class="approval_img"
              src="@/static/img/other/approval-passed.png" />
          </view>
          <view class="msg_item flex">
            <view class="label color_text_gray">备注信息</view>
            <view class="info flex color_black">
              <view>{{ PutRemarks }}</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 审批流程 修改或详情时显示 -->
      <view
        v-if="imputOtherStore.addOrdetailOrEdit === 'detail'"
        id="Approval_process"
        class="card">
        <view class="title">
          <zk-titleLeft>审批流程</zk-titleLeft>
        </view>
        <view class="approval_box flex fs_14">
          <view class="approval_item flex">
            <view class="label color_text_gray">发起人</view>
            <view class="info color_black">
              {{ imputOtherStore.putOderDetail.OperatorName }}
            </view>
          </view>
          <!-- 详情时显示 -->
          <view
            v-if="imputOtherStore.addOrdetailOrEdit === 'detail'"
            class="approval_item flex">
            <view class="label color_text_gray">审批人</view>
            <view class="info color_black">
              {{ imputOtherStore.putOderDetail.ReplyerName }}
            </view>
          </view>
          <view class="approval_item flex">
            <view class="label color_text_gray">审批结果</view>
            <view
              class="info"
              :class="[
                imputOtherStore.putOderDetail.ReplyStatus == 'CheckPass'
                  ? 'color_green'
                  : imputOtherStore.putOderDetail.ReplyStatus == 'CheckFail'
                  ? 'color_red'
                  : 'color_yellow',
              ]">
              {{
                imputOtherStore.putOderDetail.ReplyStatus == "CheckPass"
                  ? "审批通过"
                  : imputOtherStore.putOderDetail.ReplyStatus == "CheckFail"
                  ? "审批不通过"
                  : "审批中"
              }}
            </view>
          </view>
        </view>
        <!-- 详情时显示 -->
        <view
          v-if="imputOtherStore.addOrdetailOrEdit === 'detail'"
          class="approval_item fs_14 flex">
          <view class="label color_text_gray">审批意见</view>
          <view class="info color_black">
            {{ imputOtherStore.putOderDetail.ReplyMsg }}
          </view>
        </view>
      </view>
      <!-- 物资信息  -->
      <view id="material_info" class="card">
        <view class="title">
          <zk-titleLeft>物资信息</zk-titleLeft>
          <view class="handle_box flex">
            <view class="searchBox">
              <input
                v-model="searchGoodsInfoParam"
                @confirm="searchGoodsInfoList"
                placeholder="请输入物资名称或编号"
                placeholder-class="input-placeholder" />
              <view @tap="searchGoodsInfoList" class="iconBut">
                <image
                  src="@/static/img/statistics/seachH.png"
                  class="tabIcon" />
              </view>
            </view>
            <zk-btn
              v-if="
                imputOtherStore.addOrdetailOrEdit === 'add' ||
                imputOtherStore.addOrdetailOrEdit === 'edit'
              "
              @handleTap="openAddGoodsPopup"
              backgroundColor="#08121E"
              iconType="plusempty">
              添加物资
            </zk-btn>
          </view>
        </view>
        <view class="table_box">
          <!-- 头部 -->
          <view class="table_header">
            <view
              :class="[
                imputOtherStore.addOrdetailOrEdit === 'detail' ? 'detail' : '',
              ]"
              class="table_header_item">
              <!-- 表头 -->
              <view
                class="title fs_16"
                v-for="(item, index) in imputOtherStore.addtableHeader"
                :key="index">
                {{ item }}
              </view>
            </view>
          </view>
          <!-- 表格 -->
          <scroll-view
            style="height: 220px"
            @scrolltolower="PutOrderGoodsListScroll"
            scroll-y>
            <view
              class="table_body"
              v-if="imputOtherStore.addGoodsInfoList.addGoodsList">
              <view
                v-for="(item, index) in imputOtherStore.addGoodsInfoList
                  .addGoodsList"
                :key="index"
                :class="[
                  imputOtherStore.addOrdetailOrEdit === 'detail'
                    ? 'detail'
                    : '',
                ]"
                class="table_body_item">
                <view class="table_body_item_cell text_overflow">
                  <view class="fs_14 text_overflow">
                    {{ item.GoodsName }}
                  </view>
                </view>
                <view class="table_body_item_cell text_overflow">
                  <view class="fs_14 text_overflow">
                    {{ item.SpecsUnit }}
                  </view>
                </view>
                <!-- 批次 -->
                <view class="table_body_item_cell text_overflow">
                  <view
                    class="fs_14 text_overflow"
                    v-if="imputOtherStore.addOrdetailOrEdit === 'detail'">
                    {{ item.GoodsBatch }}
                  </view>
                  <view v-else class="fs_14 text_overflow">
                    <uni-easyinput
                      @input="changeIptValue($event, item)"
                      v-model="item.GoodsBatch"
                      placeholder="请输入"
                      placeholder-style="color: #CCCCD3;font-size: 13px;">
                    </uni-easyinput>
                  </view>
                </view>
                <!-- 有效期 -->
                <view class="table_body_item_cell">
                  <view class="fs_14">
                    <view
                      class="fs_14 text_overflow"
                      v-if="imputOtherStore.addOrdetailOrEdit === 'detail'">
                      {{ item.ExpirationDate }}
                    </view>
                    <view v-else class="data_input flex">
                      <picker
                        mode="date"
                        :start="startDate"
                        :end="endDate"
                        @change="chooseDate($event, item)">
                        <view class="uni-input">
                          {{ item.ExpirationDate || "请选择时间" }}
                        </view>
                      </picker>
                    </view>
                  </view>
                </view>
                <!-- 库位 -->
                <view class="table_body_item_cell">
                  <view class="fs_14">
                    <view
                      class="fs_14 text_overflow"
                      v-if="imputOtherStore.addOrdetailOrEdit === 'detail'">
                      {{ item.BoxPath }}
                    </view>
                    <view
                      v-else
                      @tap="openBoxPathPopup(item, index)"
                      class="fs_14 dorder_box_path text_overflow">
                      {{ item.BoxPath }}
                    </view>
                  </view>
                </view>
                <!-- 数量 -->
                <view class="table_body_item_cell text_overflow">
                  <view
                    class="fs_14 text_overflow"
                    v-if="imputOtherStore.addOrdetailOrEdit === 'detail'">
                    {{ item.SpecsNumber }}
                  </view>
                  <view v-else class="fs_14 text_overflow">
                    <uni-easyinput
                      type="number"
                      @input="changeIptValue($event, item)"
                      v-model="item.SpecsNumber"
                      placeholder="请输入"
                      placeholder-style="color: #CCCCD3;font-size: 13px;">
                    </uni-easyinput>
                  </view>
                </view>
                <!-- 操作 -->
                <view
                  v-if="
                    imputOtherStore.addOrdetailOrEdit === 'add' ||
                    imputOtherStore.addOrdetailOrEdit === 'edit'
                  "
                  class="table_body_item_cell text_overflow">
                  <view class="fs_14 flex handle_Box">
                    <image
                      @tap="deleteItem(item)"
                      src="@/static/img/other/con-list-del.png" />
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </scroll-view>
  </view>
  <zk-treePicker
    ref="treePicker"
    confirmColor="#0097ac"
    @select-change="selectChange"
    title="请选择检验项目"
    :localdata="imputOtherStore.positionList.KWlist"
    valueKey="BoxCode"
    textKey="BoxName"
    childrenKey="children">
  </zk-treePicker>
  <!-- 普通弹窗 -->
  <uni-popup
    borderRadius="10px"
    ref="popup_center"
    center
    @maskClick="closePopup"
    background-color="#fff">
    <view class="popup_content">
      <view class="popup_title fs_18 color_black flex">
        <text>选择物资</text>
        <image
          @tap="closePopup"
          class="small_Icon"
          src="@/static/img/other/pup-close.png" />
      </view>
      <view class="searchBox">
        <uni-icons @tap="searchGoods" type="search" color="#CCCCD3" size="24" />
        <input
          v-model="searchParam"
          @confirm="searchGoods"
          placeholder="请输入物资名称"
          placeholder-style="color: rgb(204, 204, 211);font-size: 14px;"
          type="text" />
      </view>
      <view class="popup_content_box">
        <view class="table_box">
          <!-- 头部 -->
          <view class="table_header">
            <view class="table_header_item">
              <!-- 全选 -->
              <view class="checkbox">
                <zk-checkBox
                  :exist_checked="imputOtherStore.exist_checked"
                  :allchecked="imputOtherStore.allchecked"
                  @tap="selectionAll"
                  isAllBtn></zk-checkBox>
              </view>
              <!-- 表头 -->
              <view
                class="title fs_16"
                v-for="(item, index) in imputOtherStore.goodsTableHeader"
                :key="index">
                {{ item }}
              </view>
            </view>
          </view>
          <!-- 表格 -->
          <scroll-view @scrolltolower="handleScrollToLower" scroll-y>
            <view class="table_body">
              <view
                v-for="(item, index) in imputOtherStore.goodsListData.goodsList"
                :key="index"
                class="table_body_item">
                <view class="checkbox">
                  <zk-checkBox
                    :checked="item.checked"
                    @tap="selectionChange(item)"
                    :data="item"></zk-checkBox>
                </view>
                <view class="table_body_item_cell text_overflow">
                  <view class="fs_14 text_overflow">
                    {{ item.GoodsName }}
                  </view>
                </view>
                <view class="table_body_item_cell text_overflow">
                  <view class="fs_14 text_overflow">
                    {{ item.GoodsTypeName }}
                  </view>
                </view>
                <view class="table_body_item_cell text_overflow">
                  <view class="fs_14 text_overflow">
                    {{ item.Units }}
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
          <!-- <view class="pagination">
            <zk-pagination
              :total="imputOtherStore.goodsListData.total"
              @event-change="handlePageChange">
            </zk-pagination>
          </view> -->
        </view>
      </view>
      <view class="popup_footer">
        <zk-btn @handleTap="addGoods">确定</zk-btn>
      </view>
    </view>
  </uni-popup>
  <view
    v-if="
      imputOtherStore.addOrdetailOrEdit === 'add' ||
      imputOtherStore.addOrdetailOrEdit === 'edit'
    "
    class="bottom_box">
    <zk-btn
      @handleTap="addOrEditInfo"
      class="save_btn"
      color="#08121E"
      backgroundColor="#EEEEEE">
      保存
    </zk-btn>
    <zk-btn @handleTap="shubmitAllInfo" class="submit_btn"> 提交</zk-btn>
  </view>
  <zk-tips></zk-tips>
</template>

<script setup lang="ts">
import { onLoad, onShow } from "@dcloudio/uni-app";
import { useIMputStore } from "@/stores/modules/IMput";
import { useIMputOtherStore } from "@/stores/modules/IMputOther";
const imputOtherStore = useIMputOtherStore();
const IMputstore = useIMputStore();
const PutType = ref(""); // 入库类型
//获取时间
const getDate = (type: any) => {
  const date = new Date();
  let year: any = date.getFullYear();
  let month: any = date.getMonth() + 1;
  let day: any = date.getDate();
  //时分秒
  let hour: any = date.getHours();
  let minute: any = date.getMinutes();
  let second: any = date.getSeconds();
  if (hour < 10) {
    hour = "0" + hour;
  }
  if (minute < 10) {
    minute = "0" + minute;
  }
  if (second < 10) {
    second = "0" + second;
  }
  if (month < 10) {
    month = "0" + month;
  }
  if (day < 10) {
    day = "0" + day;
  }
  if (type === "start") {
    year = year - 60;
  } else if (type === "end") {
    year = year + 2;
  }
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
};
const startDate = getDate("start");
const endDate = getDate("end");
const PutDate = ref(getDate("")); // 入库时间
const PutRemarks = ref(""); // 备注信息
const popup_center: any = ref(null); // 物资列表弹窗
// 页面加载时触发
onLoad(async (options: any) => {
  // IMputstore.getPutTypeList(); // 获取入库类型列表
  imputOtherStore.getGoodsTypeList(); // 获取物资类型列表
  if (options?.PutCode) {
    if (options.Edit) {
      imputOtherStore.addOrdetailOrEdit = "edit";
      //添加操作
      if (imputOtherStore.addtableHeader.indexOf("操作") == -1) {
        imputOtherStore.addtableHeader.push("操作");
      }
    } else {
      imputOtherStore.addOrdetailOrEdit = "detail";
      // 去掉操作
      if (imputOtherStore.addtableHeader.indexOf("操作") > -1) {
        imputOtherStore.addtableHeader.splice(
          imputOtherStore.addtableHeader.indexOf("操作"),
          1
        );
      }
    }
    imputOtherStore.PutCode = options.PutCode;
    await imputOtherStore.getPutDetailData({ PutCode: options.PutCode }); // 获取入库单详情
    PutDate.value = imputOtherStore.putOderDetail.PutTime || "";
    PutType.value = imputOtherStore.putOderDetail.PutType || "";
    PutRemarks.value = imputOtherStore.putOderDetail.PutRemarks || "";

    await imputOtherStore.getAddGoods({}); // 获取入库单物资列表
  } else {
    imputOtherStore.clearData();
    //添加操作
    if (imputOtherStore.addtableHeader.indexOf("操作") == -1) {
      imputOtherStore.addtableHeader.push("操作");
    }
  }
  console.log("addIMput onLoad", options, imputOtherStore.addOrdetailOrEdit);
});
onShow(async () => {
  // 获取库位列表
  await imputOtherStore.getPositionListData();
});
const treePicker: any = ref(null);
const selectChange = (e: any, n: any) => {
  console.log(e, e[0], n);
  imputOtherStore.addGoodsInfoList.addGoodsList[selectItem.index].BoxPath = n;
  imputOtherStore.addGoodsInfoList.addGoodsList[selectItem.index].BoxCode =
    e[0];
};
const selectItem = reactive({
  item: "",
  index: "",
});
const openBoxPathPopup = (item: any, index: any) => {
  treePicker.value._show();
  selectItem.item = item;
  selectItem.index = index;
};
//点击复制
const clickToCopy = () => {
  uni.setClipboardData({
    data: imputOtherStore.PutCode,
    success: () => {
      uni.showToast({
        title: "复制成功",
        duration: 1000,
        icon: "none",
        mask: true,
      });
    },
  });
};
// 打开物资列表弹窗 添加物资
const openAddGoodsPopup = async () => {
  // 选择入库类型
  if (imputOtherStore.addOrdetailOrEdit === "add") {
    if (PutType.value === "") {
      uni.showToast({
        title: "请选择入库类型",
        duration: 500,
        icon: "none",
        mask: true,
      });
      return;
    } else {
      await imputOtherStore.addPutOrder({
        PutType: PutType.value,
        PutDate: PutDate.value,
        PutRemarks: PutRemarks.value,
      });
      popup_center.value.open();
      // 获取物资列表
      await handlePageChange({});
    }
  } else {
    popup_center.value.open();
    // 获取物资列表
    await handlePageChange({});
  }
};
// 保存或修改入库单信息
const addOrEditInfo = async () => {
  if (PutType.value === "") {
    uni.showToast({
      title: "请选择入库类型",
      duration: 500,
      icon: "none",
      mask: true,
    });
    return;
  }
  if (imputOtherStore.addOrdetailOrEdit === "add") {
    // 新增入库单
    await imputOtherStore.addPutOrder({
      PutType: PutType.value,
      PutDate: PutDate.value,
      PutRemarks: PutRemarks.value,
    });
    imputOtherStore.addOrdetailOrEdit = "edit";
  } else if (imputOtherStore.addOrdetailOrEdit === "edit") {
    // 修改入库单
    await imputOtherStore.updatePutOrder({
      PutType: PutType.value,
      PutDate: PutDate.value,
      PutRemarks: PutRemarks.value,
    });
  }
};
// 提交入库单
const shubmitAllInfo = async () => {
  if (PutType.value === "") {
    uni.showToast({
      title: "请选择入库类型",
      duration: 500,
      icon: "none",
      mask: true,
    });
    return;
  }
  await imputOtherStore.submitPutOrder({
    PutType: PutType.value,
    PutDate: PutDate.value,
    PutRemarks: PutRemarks.value,
  });
};
// 删除物资
const deleteItem = (item: any) => {
  console.log("deleteItem", item);
  uni.showModal({
    title: "提示",
    content: "删除后还需保存或提交，确认删除吗？",
    showCancel: true,
    cancelText: "取消",
    cancelColor: "#ccccd3",
    confirmText: "确定",
    confirmColor: "#32966f",
    success: (result) => {
      if (result.confirm) {
        imputOtherStore.deletePutGoods(item);
      }
    },
    fail: () => {},
    complete: () => {},
  });
};
// 关闭物资列表弹窗
const closePopup = () => {
  popup_center.value.close();
  console.log("closePopup");
  pageNum.value = 1;
};
//全选
const selectionAll = () => {
  imputOtherStore.selectAll();
};
//选择
const selectionChange = (item: any) => {
  item.checked = !item.checked;
  imputOtherStore.selectItem(item);
};

// 搜索物资
const searchParam = ref("");
const searchGoods = async () => {
  await handlePageChange({ searchParam: searchParam.value });
  pageNum.value = 1;
};
// 物资列表分页
const handlePageChange = async (data: any) => {
  await imputOtherStore.getGoodsListData({
    ...data,
  });
};
const pageNum = ref(1);
// 物资列表滚动到底部
const handleScrollToLower = async () => {
  if (
    imputOtherStore.goodsListData.currPage <
    imputOtherStore.goodsListData.totalPage
  ) {
    pageNum.value++;
    await handlePageChange({
      pageNum: pageNum.value,
      Scroll: true,
      searchParam: searchParam.value,
    });
  } else {
    uni.showToast({
      title: "没有更多数据了",
      duration: 1000,
      icon: "none",
      mask: true,
    });
  }
};
//入库单物资列表搜索物资信息列表
const searchGoodsInfoParam = ref("");
const searchGoodsInfoList = async () => {
  await imputOtherStore.getAddGoods({
    searchParam: searchGoodsInfoParam.value,
  });
  pageNumPutOrder.value = 1;
};
//入库单物资列表滚动到底部
const pageNumPutOrder = ref(1);
const PutOrderGoodsListScroll = async () => {
  if (
    imputOtherStore.addGoodsInfoList.currPage <
    imputOtherStore.addGoodsInfoList.totalPage
  ) {
    pageNumPutOrder.value++;
    await imputOtherStore.getAddGoods({
      pageNum: pageNumPutOrder.value,
    });
  } else {
    uni.showToast({
      title: "没有更多数据了",
      duration: 1000,
      icon: "none",
      mask: true,
    });
  }
};
//向入库单中添加物资
const addGoods = async () => {
  await imputOtherStore.addGoods();
  setTimeout(() => {
    closePopup();
  }, 300);
};

const date = ref("");
//输入框值改变时触发
const changeIptValue = ($event: any, item: any) => {
  console.log($event, item);
};
const time = ($event: any, item: any) => {};
// 点击时间弹出框
const chooseDate = ($event: any, item: any) => {
  console.log($event, item);
  item.ExpirationDate = $event.detail.value;
};

// 清空库位
const clearKW = (item: any) => {
  console.log("clearKW", item);
  item.PositionCode = "";
};
</script>

<style lang="scss" scoped>
#addIMput {
  position: relative;
  height: calc(552px - 64px);
  width: 98%;
  margin: auto;
  padding: 0 10px;
  z-index: 1;
  margin-top: 10px;
  padding: 10px;
  scroll-view {
    height: 100%;
    width: 100%;
  }
  .card {
    padding: 20px;
  }
  /********基本信息********/
  #baseInfo {
    position: relative;
    /********新增时form */
    .form_box {
      margin: 10px 0;
      .form_item {
        margin-right: 10px;
        &.select {
          width: 120px;
        }
        &.data {
          width: 200px;
        }
        &.remark {
          width: 400px;
        }
        .label {
          color: rgb(8, 18, 30);
          font-family: 思源黑体;
          font-size: 16px;
          margin: 5px 0;
        }
      }
    }
    /********详情时msg */
    .detail_box {
      .msg_box {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .msg_item {
          width: 30%;
          &.order {
            width: 40%;
            .label {
              white-space: nowrap;
            }
            .text_overflow {
              max-width: 60% !important;
            }
          }
          &.type {
            width: 25%;
          }
          .info {
            margin-left: 5px;
            image {
              width: 14px;
              height: 14px;
              margin-left: 5px;
            }
          }
        }
        .approval_img {
          width: 80px;
          height: 80px;
          position: absolute;
          top: 10px;
          right: 10px;
        }
      }
      .msg_item {
        margin: 10px 0;
      }
    }
  }
  /********审批流程*******/
  #Approval_process {
    margin: 18px 0;
    .approval_box {
      margin: 10px 0;
      .approval_item {
        width: 33.33%;
      }
    }
    .approval_item {
      margin: 10px 0 10px;
      .label {
        margin-right: 10px;
      }
    }
  }
  /******物资信息*******/
  #material_info {
    margin: 18px 0;
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .handle_box {
        .searchBox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 240px;
          height: 40px;
          margin: 4px 0 8px;
          border-radius: 8px;
          padding: 9px 0 9px 12px;
          border: 1px solid rgb(228, 228, 228);
          background-color: #ffffff;
          margin: 0 10px;
          input {
            font-size: 14px;
          }

          .iconBut {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 38px;
            height: 38px;
            border-left: 1px solid rgb(228, 228, 228);

            image {
              width: 16px;
              height: 16px;
            }
          }
        }
      }
    }
    .table_box {
      padding: 16px 0 0 0;
      width: 100%;
      .table_header_item,
      .table_body_item {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: 40px;
        align-items: center;
        padding: 10px;
      }
      .table_header_item {
        padding: 5px 10px !important;
        grid-template-rows: 30px;
      }
      .table_header_item.detail,
      .table_body_item.detail {
        grid-template-columns: repeat(6, 1fr);
      }
      .table_header_item {
        width: 100%;
        border-radius: 6px;
        background: #f2f3f4;
        .title {
          color: #adafb8;
          font-family: HarmonyOS Sans SC;
          font-size: 14px;
          text-align: center;
        }
      }
      .table_body {
        width: 100%;
        height: 100%;
        .table_body_item {
          border-bottom: 1px solid rgb(244, 244, 244);
        }
        .table_body_item_cell {
          .dorder_box_path {
            width: 80%;
            border: 1px solid rgb(228, 228, 228);
            border-radius: 8px;
            height: 40px;
            line-height: 40px;
            padding: 0 0 0 10px;
          }
          ::v-deep .uni-easyinput {
            .uni-easyinput__content {
              width: 80%;
              border: 1px solid rgb(228, 228, 228);
              border-radius: 8px;
              font-size: 14px;
            }
          }
          ::v-deep .uni-data-tree {
            width: 80%;
            border: 1px solid rgb(228, 228, 228);
            border-radius: 8px;
            font-size: 14px;
            padding: 10px 5px;
            .selected {
              display: flex;
              align-items: center;
              justify-content: space-between;
            }
          }
          .data_input {
            display: flex;
            width: 80%;
            border: 1px solid rgb(228, 228, 228);
            border-radius: 8px;
            padding: 10px 5px;
          }
          .handle_Box {
            width: 100%;
            image {
              width: 16px;
              height: 16px;
            }
          }
        }
      }
    }
  }
}
/**************** 弹窗 ***********/
.popup_content {
  padding: 20px;
  border-radius: 16px;
  width: 620px;
  height: 424px;
  /* bg/纯白 */
  background: rgb(255, 255, 255);
  .popup_title {
    justify-content: space-between;
  }
  .searchBox {
    border: 1px solid rgb(228, 228, 228);
    border-radius: 10px;
    display: flex;
    align-items: center;
    margin: 10px 0 0 0;
    height: 40px;
    padding: 0 10px;
    input {
      width: 100%;
      height: 100%;
    }
  }
  .popup_content_box {
    height: calc(100% - 124px);
    .table_box {
      padding: 10px 0 0 0;
      width: 100%;
      height: 100%;
      scroll-view {
        height: calc(100% - 36px);
        .table_body {
          width: 100%;
          height: 100%;
          .table_body_item {
            border-bottom: 1px solid rgb(244, 244, 244);
          }
          .table_body_item_cell {
            text-align: center;
            .handle_Box {
              justify-content: center;
              width: 100%;
              view {
                margin: 0 5px;
              }
            }
          }
        }
      }
      .table_header_item,
      .table_body_item {
        display: grid;
        grid-template-columns: 48px repeat(3, 1fr);
        grid-template-rows: 40px;
        align-items: center;
        padding: 0 10px;
      }
      .table_header_item {
        width: 100%;
        border-radius: 6px;
        background: #f2f3f4;
        .title {
          color: #adafb8;
          font-family: HarmonyOS Sans SC;
          font-size: 14px;
          text-align: center;
        }
      }
    }
  }
  .popup_footer {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    ::v-deep .zk_btn {
      width: 200px;
      justify-content: center;
    }
  }
}
/********* 底部按钮 *********/
.bottom_box {
  height: 72px;
  width: 100%;
  box-shadow: 0px -4px 15px 0px rgba(0, 0, 0, 0.05);
  background: rgb(255, 255, 255);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  & > view {
    margin: 0 10px;
    justify-content: center;
  }
  .save_btn {
    width: 100px;
  }
  .submit_btn {
    width: 400px;
  }
}
</style>
